<template>
        <div class="Recharge">
            <headerTou :isfanhui=true :border=true title="充值"  url='friendsPrivilege'></headerTou>
            <div class="renDetails">
              <img src="../img/Rectangle@2x.png" alt="">
              <div class="DetailsTitle">
                  <div class="DetailsName">易趣玩</div>
                  <div class="phone"> 余额：123124元</div>
              </div>
          </div>
          <div class="made">
              <div class="made1 " v-for="(item,i) in  chongzhi" :key=item.id  :class="{right:i%3!=0,borDer:i==isbor}" @click="border(i,item.chong)">
                  <div class="zongshu " >
                    <div class="chong">￥{{item.chong}}</div>
                    <div class="song">{{item.song}}</div>
                    </div>
              </div>
          </div>
            <div class="wubai">
                充值<span class="wubai1">￥{{sumchong}}</span>
            </div>
            <div class="ku">
                <div  class="ku1">赠送以下价值500.00元的特权</div>
                <div  class="ku2">
                     <carque :data=data></carque>
                     <carque :data=data></carque>

                </div>
            </div>
                 <div class="ku">
                <div  class="ku1">以下特权由你分享给你的亲友</div>
                <div  class="ku2">
                     <carque :data=data></carque>
                     <carque :data=data></carque>
                      <carque :data=data></carque>
                     <carque :data=data></carque>
                      <carque :data=data></carque>
                     <carque :data=data></carque>
                     
                </div>
            </div>
                <div class="footflex">
          <div class="btn" @click=tiaoSuccess>去支付500元</div>
         </div>
        </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import carque from "./zujian/carque.vue";
export default {
  data() {
    return {
         is:1,
      data: {
        title: "亚华口腔",
        qianshu: "900",
        cishu: "20",
       
      },
      isbor: 1,
      sumchong: 0,
      chongzhi: [
        {
          id: 1,
          chong: "500",
          song: "送50元"
        },
        {
          id: 2,
          chong: "500",
          song: "送50元"
        },
        {
          id: 3,
          chong: "500",
          song: "送50元"
        },
        {
          id: 4,
          chong: "500",
          song: "送50元"
        },
        {
          id: 5,
          chong: "500",
          song: "送50元"
        },
        {
          id: 6,
          chong: "500",
          song: "送50元"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    border: function(i, c) {
      (this.isbor = i), (this.sumchong = c);
    },
    tiaoSuccess:function(){
         this.$router.push({name:"RechargeSuccess"})
    }
  },
  components: {
    headerTou,
    carque
  }
};
</script>

<style lang="scss" scoped>
.Recharge {
  padding-bottom:120px; 
  .renDetails {
    padding: 0 0px 0 30px;
    width: 720px;
    height: 152px;
    border-bottom: 20px solid #e0e0e0;
    position: relative;
    img {
      height: 96px;
      width: 96px;
      position: absolute;
      left: 30px;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto 0;
      border-radius: 4px;
    }
    .DetailsTitle {
      font-family: PingFangSC-Regular;
      position: absolute;
      left: 150px;
      top: 36px;
      line-height: 50px;
      .DetailsName {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #333333;
      }
      .phone {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #a5a5a5;
      }
    }
  }
  .made {
    display: flex;
    justify-content: flex-start;
    padding: 13 * 2px 19 * 2px;
    flex-wrap: wrap;
    .right {
      margin-left: 10px;
    }

    .made1 {
      border-radius: 4px;
      border: 2px solid #e5e5e5;
      width: 108 * 2px;
      height: 56 * 2px;
      box-sizing: border-box;
      margin-bottom: 16px;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .zongshu {
        width: 100%;
        div {
          width: 100%;
        }
        .chong {
          font-family: PingFangSC-Regular;
          font-size: 40px;
          color: #e97a36;
          text-align: center;
}
          .song {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
            text-align: center;
          }
        
      }
    }
    .borDer {
      background: #ffffff;
      border: 2px solid #e97a36;
      border-radius: 4px;
    }
  }
  .wubai {
    width: 100%;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 40px;
    color: #333333;
    .wubai1 {
      font-family: SFUIText-Regular;
      font-size: 40px;
      color: #e97a36;
    }
  }
  .ku {
    margin-top: 40px;
    padding: 0 30px;
  }
  .ku1 {
    margin-bottom: 26px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #333333;
  }
  .ku2 {
    margin: auto;
    width: 696px;
    .kapai {
      margin-bottom: 10px;
    }
  }
  .footflex{
    width: 100%;
    height:102px;
    background: #ffffff;
    line-height: 102px;
    position: fixed;
    bottom: 0;
      .btn {
    border-radius: 8px;
    background: #e97a36;
    width: 630px;
    height: 72px;
    font-family: PingFangSC-Regular;
    font-size: 36px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 72px;
    margin: 0 auto;
   position: relative;
   top: 15px;
  }
  }
}
</style>


